<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>聊天室</title>
<style>

	#message{
		margin-top:20px;
		border:1px solid gray;
		padding:20px;
	}
</style>

</head>
<body>
	
	昵称：<input type="text" id="nickname" /> 
	<button onclick="conectWebSocket()">连接WebSocket</button>
	<button onclick="closeWebSocket()">断开连接</button>

	<br />
	消息：<input id="text" type="text"  />
	频道号<input id="toUser" type="text" />
	<button onclick="send()">发送消息</button>
	
	<!-- 存放接收到的消息. -->
	<div id="message">
		
	</div>


<script type="text/javascript">
	
	//连接对象.
	var websocket = null;
	var nickname = null;
	function conectWebSocket(){
		nickname = document.getElementById("nickname").value;
		if(nickname == ''){
			alert("请输入昵称");
			return;
		}
		//判断当前的浏览器是否支持websocket.
		if("WebSocket" in window){
			websocket = new WebSocket("ws://localhost:8080/websocket/"+nickname);
		}else{
			alert("Not support websocket");
			return false;
		}
		
		//连接成功的方法.
		websocket.onopen = function(event){
			setMessgeHtml("Loc MSG:连接成功");
		}
		
		//连接关闭.
		websocket.onclose = function(event){
			setMessgeHtml("Loc MSG:连接关闭");
		}
		
		//连接异常.
		websocket.onerror = function(event){
			setMessgeHtml("Loc MSG:连接异常");
		}
		
		
		websocket.onmessage = function(event){
			setMessgeHtml(event.data);
		}
		
	}
	
	
	function setMessgeHtml(msg){
		var message = document.getElementById("message");
		message.innerHTML += msg+"<br/>";
	}
	
	/**
		发送消息.
	*/
	function send(){
		var message = document.getElementById("text").value;
		var toUser = document.getElementById("toUser").value;
		var socketMsg = {msg:message,toUser:toUser};
		if(toUser == ''){
			socketMsg.type =0;//群聊.
		}else{
			socketMsg.type =1;//单聊.
		}
		
		//websocket.send(nickname+":"+message);
		websocket.send(JSON.stringify(socketMsg));//将json对象转换为json字符串.
	}
	
	
</script>



</body>
</html>